<template>
	<div class="mine-container pd-T40">
        <myNavbar title="关于我们"></myNavbar>
		<list>
			<cell>
				<div class="about">
					<div class="about-top">
						<image class="about-top-img" :src="img"></image>
						<text class="about-top-text">版本:2020121001{{ version }}</text>
					</div>
					<div class="about-center">
						<div class="about-item" v-for="(item, index) in aboutList" :key="index" @click="detailClick(item.title)">
							<text class="about-item-text">{{ item.title }}</text>
							<icon class="about-item-icon" content="tb-right"></icon>
						</div>
					</div>
				</div>
			</cell>
		</list>
	</div>
</template>
<script>
import { list, tag } from '../../../api/article';
const eeui = app.requireModule('eeui');
import myNavbar from '../../../components/myNavbar/myNavbar.vue'
export default {
	data() {
		return {
			aboutList: [],
			tagIds: '',
			version: '1.01',
			img: ''
		};
	},
	created() {
		this.initAbout();
	},
    components:{
	  myNavbar
    },
	methods: {
		initAbout() {
			let params = {
				mchId: this.getGlobalData().mchId,
				type: 0
			};
			tag(params)
				.then(res => {
					console.log(res);
					res.data.data.forEach(item => {
						if (item.name === '关于我们') {
							this.tagIds = item.id;
							this.version = item.memo;
							this.img = item.icon;
							// 查找关于我们
							list({ mchId: this.getGlobalData().mchId, tagIds: this.tagIds })
								.then(res => {
									console.log(res);
									this.aboutList = res.data.data;
								})
								.catch(err => {
									console.log(err);
								});
						}
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		detailClick(title) {
			let params = {
				mchId: this.getGlobalData().mchId,
				tagIds: this.tagIds,
				title
			};
			eeui.openPage({ url: 'root://pages/member/detail/detail.js', params,statusBarType: "immersion", statusBarStyle:false}, result => {
				console.log('跳转到详情页成功');
			});
		}
	}
};
</script>

<style scoped>
.mine-container {
	background-color: rgba(248, 248, 248, 1);
}
.about {
	width: 750px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.about-top {
	margin-top: 100px;
	width: 750px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 80px;
}
.about-top-img {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 10px;
	margin: 0 auto;
	border: 1px solid #f8f8f8;
	border-radius: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
}
.about-top-text {
	font-size: 28px;
	margin-top: 12px;
	color: #c5c5c5;
}
.about-center {
	margin-top: 25px;
	width: 712.5px;
	background-color: #fff;
	display: flex;
	flex-direction: column;
}
.about-item {
	padding: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.about-item-text {
	font-size: 28px;
	font-family: PingFangSC;
	font-weight: 400;
	color: rgba(26, 26, 30, 1);
}
.about-item-icon {
	width: 50px;
	height: 50px;
	font-size: 50px;
	color: #cccccc;
}

.page-navbar {
	width: 750px;
	height: 90px;
}
.page-navbar-title {
	color: #ffffff;
	font-size: 28px;
}
</style>
